<template>
  <a-tabs class="tab" @change="callback" v-model="activeKey">
    <a-tab-pane v-for="item in tabs" :key="item.id" :tab="item.title">
      <div class="content">
        <component :is="item.is" v-if="isTabShow" ></component>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
// import Faq from "/@/components/support/Faq.vue";
// console.log(import("/@/components/support/Faq.vue"))
import {getCurrentInstance, onMounted, ref, nextTick} from "vue";

export default {
  name: "TabPage",
  props: {
    tabs: {
      type: Array,
      default: []
    }
  },
  setup(props){
    let componentsArray = {}
    props.tabs.forEach(item => {
      /* @vite-ignore */
      import(item.path).then(res=>{
        componentsArray[item.is] = res.default
      })
    })
    const vm = getCurrentInstance()
    vm.components = componentsArray
    console.log('>>>>>>>>>.')


    const callback =(key) =>{
        console.log(key);
    }
    let isTabShow = ref(false)
    let activeKey = ref("0")
    onMounted(()=>{
      setTimeout(()=>{
        console.log('onMounted')
        isTabShow.value = true
        activeKey.value = "1"
      },500)
    })
    return{
      callback,
      isTabShow,
      activeKey
    }
  },
}
</script>

<style scoped lang="scss">
  .tab{
    ::v-deep .ant-tabs-nav-wrap{
      text-align: center;
      background-color:#1d1d1b;
      .ant-tabs-nav{
        .ant-tabs-tab{
          color:white;
        }
      }
    }
    .content{
      margin:0 auto;
      width:70vw;
    }
  }
</style>
